<template>
	<div class="my-divider-container">
		<h3 class="my-divider-item">{{title}}</h3>
		<mu-button flat class="my-divider-item" color="white" text-color="#AFAFAF">
			{{hint}}
			<mu-icon value="keyboard_arrow_right" right></mu-icon>
		</mu-button>
	</div>
</template>

<script>
export default {
	name: "MySDivider",
	props: {
		title: String,
		hint: String
	}
}
</script>

<style scoped>
	.my-divider-container {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 10px 0 10px 5px;
	}
	.my-divider-item{
		display: inline-block;
	}

</style>